<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="24" :xs="24">
        <el-tabs v-model="activeTabName" @tab-click="handleTabClick">
          <el-tab-pane label="服饰品类销售报表" name="first">
            <div>
              <div ref="main1" style="width: 600px;height: 400px;margin: 0 auto;" />
            </div>
            <el-card shadow="hover">
              <el-table v-loading="loading" :data="reportCateList">
                <el-table-column label="类别名称" align="center" prop="clCategoryName" />
                <el-table-column label="销售数量" align="center" prop="quantity" />
                <el-table-column label="数量比例" align="center" prop="countRatio" />
                <el-table-column label="销售金额" align="center" prop="payment" />
                <el-table-column label="金额比例" align="center" prop="paymentRadio" />
              </el-table>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="商品销量报表" name="second">
            <div>
              <div ref="main2" style="width: 600px;height: 400px;margin: 0 auto;" />
            </div>
            <el-card shadow="hover">
                <el-table v-loading="loading" :data="reportClothesList">
                    <el-table-column label="服饰名称" align="center" prop="clName" />
                    <el-table-column label="销售数量" align="center" prop="quantity" />
                    <el-table-column label="数量比例" align="center" prop="countRatio" />
                    <el-table-column label="销售金额" align="center" prop="payment" />
                    <el-table-column label="金额比例" align="center" prop="paymentRadio" />
                </el-table>
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                align="center"
                >
                </el-pagination>
            </el-card>
          </el-tab-pane>
        </el-tabs>

      </el-col>
    </el-row>
  </div>
</template>

<script>
import { listReportCate, listReportClothesByPage, getCountByCategoryPieData, getCountByclNamePieData } from '@/api/report'
export default {
  name: 'Report',
  data() {
    return {
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 当前页
      pageNum: 1,
      // 每页数据量
      pageSize: 5,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
      },
      //退货列表
      reportCateList: [
        {
          cl_category_id: undefined,
          payment: undefined,
          countRatio: undefined,
          paymentRadio: undefined,
          quantity: undefined,
        }
      ],
      // 激活的tab名称
      activeTabName: 'first',
      
      // 展开的折叠面板
      activeCollapseName: 'one',

    }
  },
  
  created() {
    this.getReportCateList();
    this.getReportClothesList();
  },
  mounted() {
    getCountByCategoryPieData().then((response) => {
      const pieData = response.data
      this.initCateEcharts(pieData)
    })
    getCountByclNamePieData().then((response) => {
      const pieData = response.data
      this.initclNameEcharts(pieData)
    })
  },
  methods: {

    getReportCateList() {
      this.loading = true;
      listReportCate().then((response) => {
        this.reportCateList = response.data;
        this.loading = false;
      })
    },
    getReportClothesList() {
      this.loading = true;
      listReportClothesByPage(this.queryParams).then((response) => {
        this.reportClothesList = response.data.list;
        this.total = response.data.total;
        this.pageNum = response.data.pageNum;
        this.pageSize = response.data.pageSize;
        this.loading = false;
      })
    },
    
    /** 切换tab */
    handleTabClick(tab, event) {
    },
    /** 清除数据 */
    clearAllData() {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    resetqueryParams(){
      this.queryParams = {
        pageNum: 1,
        pageSize: 5,
      }
    },
    /** 处理分页 */
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getReportClothesList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getReportClothesList();
    },

    initCateEcharts(pieData) {
      var myChart = this.$echarts.init(this.$refs.main1)
      var option = {
        title: {
          text: '服装店品类销售报表',
          subtext: '按类别对销量进行统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [{
          name: '占所有服饰的',
          type: 'pie',
          radius: '50%',
          data: pieData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      }
      option && myChart.setOption(option)
    },
    initclNameEcharts(pieData) {
      var myChart = this.$echarts.init(this.$refs.main2)
      var option = {
        title: {
          text: '各服饰销售报表',
          subtext: '按服饰ID对销量进行统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [{
          name: '占所有服饰的',
          type: 'pie',
          radius: '50%',
          data: pieData,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      }
      option && myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
  .card-panel-num1 {
    font-size: 30px;
    color: #40c9c6;
  }
  .card-panel-num2 {
    font-size: 40px;
    color: #eb0f0f;
  }
  .mb8 {
    margin-bottom: 8px;
  }
</style>




